<!-- 匹配结果 -->
<template>
    <div>
        <el-row class="content">
            <el-col :span="24">
                <el-form ref="form" :model="form" label-width="120px" size="small">
                    <el-form-item label="票面金额">
                        <el-col :span="6" class="bill_price">
                            <el-input type="text"
                                      v-model="form.billSumPrice"
                                      placeholder="请输入票面金额"
                                      @input="changePrice()"
                                      suffix-icon="iconfont icon-wanyuan"
                            ></el-input>
                        </el-col>&#X3000;
                        <el-button type="primary" size="small" v-if="form.billSumPrice != ''" @click="searchPrice()">搜索</el-button>
                        <el-button type="info" size="small" v-if="form.billSumPrice != ''" @click="clearPrice()">清空</el-button>
                    </el-form-item>
                    <el-form-item label="到期日期">
                        <el-col :span="6">
                            <el-date-picker
                                    v-model="form.deadlineDays"
                                    type="date"
                                    placeholder="选择日期"
                                    class="full-width"
                                    :picker-options="pickerOptions"
                                    value-format="yyyy-MM-dd"
                                    @change="changeDate()">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="承兑机构">
                        <el-col :span="24">
                            <el-checkbox-group v-model="acceptorTypeArr" @change="changeCheckbox(acceptorTypeArr)" size="medium" v-if="form.billSumPrice == '' || form.deadlineDays == ''">
                                <el-checkbox-button v-for="item in acceptOptions" :label="item.key" :key="item.key">{{item.label}}</el-checkbox-button>
                            </el-checkbox-group>
                            <el-radio-group v-model="form.acceptorType" size="medium" @change="changeAcceptorStr()" v-if="form.billSumPrice != '' && form.deadlineDays != ''">
                                <el-radio-button v-for="item in acceptOptions" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                            </el-radio-group>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="背书瑕疵">
                        <el-col :span="10">
                            <el-radio-group v-model="form.billFlaw" size="medium" @change="changeFlaw()">
                                <el-radio-button v-for="item in flawOptions" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                            </el-radio-group>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="报价方式">
                        <el-col :span="10">
                            <el-radio-group v-model="form.LoanAndEntrance" size="medium" @change="changeTradeType()">
                                <el-radio-button v-for="item in tradeModeOptions" :label="item.key" :key="item.key">{{item.label}}</el-radio-button>
                            </el-radio-group>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="筛选条件" class="condition_tangs">
                        <el-tag
                                v-for="tag in tags"
                                :key="tag.name"
                                closable
                                disable-transitions
                                :type="tag.type"
                                size="small"
                                @close="closeTag(tag)">
                            {{tag.name}}
                        </el-tag>
                        <span v-if="tags.length == 0" class="hpx-label">无</span>
                        <span class="clear_filter" v-if="tags && tags.length != 0" @click="clearFilter()"><i class="iconfont icon-shanchu"></i> 清空筛选</span>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" class="form-title">
                <div class="form-title-con form-title-con1">报价信息</div>
            </el-col>
        </el-row>
        <el-table
                :data="tableData"
                :row-key="get_row_key"
                :expand-row-keys="expandRowKeys"
                @current-change="toggleRowExpansion"
                @row-click="clickTable"
                ref="refTable"
                stripe
                :default-sort = "{prop: 'offerTime', order: 'descending'}"
                @sort-change="sortChange"
                style="width: 100%">
            <el-table-column type="expand">
                <template>
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-row>
                            <el-col :span="5">
                                <el-form-item label="票据类型:">
                                    <span>{{ detailData.billTypeId == 101 ? '电票' : '纸票' }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="票面金额:">
                                    <span>{{ detailData.billSumPrice }}</span>

                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="交易方式:">
                                    <span>{{ detailData.tradeTypeId == 1801 ? '买断' : '带贴' }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="期限:">
                                    <span>{{ formatterTime(detailData.startTime) }}--{{ formatterTime(detailData.endTime) }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="5">
                                <el-form-item label="瑕疵可收:">
                                    <span>{{ detailData.billFlawId == 1 ? '可' : '不可' }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="账户状态:">
                                    <span>{{ detailData.customerStatus == 0 ? '非注册用户' : (detailData.customerStatus == 1 ? '注册卖方' : '注册买卖方') }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="报价方式:">
                                    <span>{{ detailData.outUsage == 0 ? '行口' : '货款' }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="联系人姓名:">
                                    <span>{{ detailData.contactName }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="原始报价:">
                                    <span>{{ detailData.description }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    prop="offerTime"
                    label="报价时间"
                    sortable="offerTime">
            </el-table-column>
            <el-table-column
                    prop="simpleName"
                    label="报价机构">
            </el-table-column>
            <!--<el-table-column-->
                    <!--prop="billSumPrice"-->
                    <!--label="票面金额">-->
            <!--</el-table-column>-->
            <el-table-column prop="discountAmount" label="每十万扣">
                <template slot-scope="scope">
                    <span>{{scope.row.discountAmount > 0 ? scope.row.discountAmount : '--'}}{{scope.row.discountAmount > 0 ? '元' : ''}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="billRate" label="加价利率">
                <template slot-scope="scope">
                    <span>
                        {{(scope.row.billRate == '' || scope.row.billRate == null || scope.row.billRate == 0) ? '' : scope.row.billRate}}
                        {{(scope.row.billRate == '' || scope.row.billRate == null || scope.row.billRate == 0) ? '' : '%'}}
                        {{(scope.row.billEveryPlus != 0 && scope.row.billEveryPlus != null) ? '+':''}}
                        {{scope.row.billEveryPlus == null || scope.row.billEveryPlus == 0 ? '':scope.row.billEveryPlus}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="acceptorTypeName"
                    label="承兑机构"
                    :formatter="formatterAccept">
            </el-table-column>
            <el-table-column
                    prop="contactPhone"
                    label="联系人手机号">
            </el-table-column>
            <el-table-column
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button type="primary" plain size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import { acceptorTypes, flawChooseTypes, tradeModeTypes } from '@/util/constantStatus';
    import _ from 'lodash'
    import { ellipsis } from '@/util/format';
    import Pagination from "@/types/Pagination";
    import moment from 'moment'
    @Component({
        extends: Pagination
    })
    export default class MatchResult extends Vue {
        @Prop() index!:any
        form = {
            acceptorType: '',
            billFlaw: '',
            billSumPrice: '',
            deadlineDays: '',
            LoanAndEntrance: '', //'load'货款，'entrance'，行口
            //outUsageIsEntrance:0, //0：非行口 1：行口
            //outUsageIsLoan: 0,   //0：非货款 1：货款
            orderBy: "-offerTime",
            acceptorTypeStr: ''
        }
        acceptorTypeArr = ['']
        acceptOptions = acceptorTypes;
        flawOptions = flawChooseTypes;
        tradeModeOptions = tradeModeTypes;

        tableData:any = []

        detailData = {
            billTypeId:'',
            tradeTypeId: '',  //交易方式  1801：买断  !1805 带贴
            startTime: '',
            endTime: '',
            billFlawId: '',  //瑕疵可收  1: 可  !1: 不可
            customerStatus: '',//用户状态   0：非注册用户  1：注册卖方  2：注册买卖方
            outUsage: '',//报价方式  0:行口  !0:货款
            description: '' //原始报价
        }
        //筛选条件标签
        tags:any = []
        oldChecked = []
        filterCondition = {
            //票面金额
            billPrice: '',
            //到期日
            expireDate: '',
            //承兑机构
            acceptType: '',
            //背书瑕疵
            flaw: '',
            //报价方式
            LoanAndEntrance: '',
            acceptorType: ''
        }
        get filterType () {
            return {
                billPrice: `票面金额: ${this.filterCondition.billPrice}万`,
                expireDate: `到期日期: ${this.filterCondition.expireDate}`,
                acceptType: `承兑机构: ${this.filterCondition.acceptType}`,
                flaw: `背书瑕疵: ${this.filterCondition.flaw}`,
                LoanAndEntrance: `报价方式: ${this.filterCondition.LoanAndEntrance}`,
                acceptorType: `承兑机构：${this.filterCondition.acceptorType}`
            }
        }
        //展开行的集合
        expandRowKeys:any = []

        //获取票查查列表数据
        async getData () {
            let form = {
                ...this.form,
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
            }
            let res:any = await this.$http.post('pcc/pc/getPccBillOfferListPC',form)
            if(res.meta.code == 200){
                this.tableData = res.data.listName
                this.pagination.total = res.data.page_info.items_number;
                this.tableData.map((item:any, index) => {
                    item.index = index
                })
            }
            if(this.$route.params.index){
                this.showEndorsed(this.tableData[this.index])
            }
        }
        //限制日期选择的最小值
        pickerOptions = {
            disabledDate(time) {
                return time.getTime() < Date.now()
            }
        }
        //关闭标签
        closeTag (tag) {
            this.tags.splice(this.tags.indexOf(tag),1)
            let variable = tag.variable
            switch (variable) {
                case 'billPrice':
                    this.form.billSumPrice = ''
                    break;
                case 'expireDate':
                    this.form.deadlineDays = ''
                    break;
                case 'acceptorType':
                    let deleteTag = _.find(this.acceptOptions, (el) => tag.name.indexOf(el.label)>-1)
                    if(deleteTag){
                        this.acceptorTypeArr.forEach((item, index) => {
                            if(item === deleteTag.key){
                                this.acceptorTypeArr.splice(index, 1)
                                if(this.acceptorTypeArr.length == 0){
                                    this.acceptorTypeArr = ['']
                                }
                            }
                        })
                    }
                    break;
                case 'flaw':
                    this.form.billFlaw = ''
                    break;
                case 'LoanAndEntrance':
                    this.form.LoanAndEntrance = ''
                    break;
                case 'acceptorType':
                    this.form.acceptorType = ''
                    break;
            }
            this.getData();
        }
        clearFilter () {
            this.tags = []
            this.form.billSumPrice = ''
            this.form.deadlineDays = ''
            this.acceptorTypeArr = ['']
            this.form.billFlaw = ''
            this.form.LoanAndEntrance = ''
            this.form.acceptorType = ''
            this.getData()
        }
        //生成筛选条件标签
        getConditionTag (label:string, variable:string) {
            let tag = {
                name: label,
                variable: variable,
                type: 'danger'
            }
            this.tags.push(tag)
        }
        //点击不限时删除对应的标签
        deleteTags (variable:string) {
            let anotherTags = this.tags.filter((el, index) => {
                return el.variable !== variable
            })
            this.tags = anotherTags;
        }
        //比较两个数组的差异
        diff(arr1, arr2) {
            let newArr = [];
            let arr3 = [];
            for (let i=0;i<arr1.length;i++) {
                if(arr2.indexOf(arr1[i]) === -1)
                    arr3.push(arr1[i]);
            }
            let arr4 = [];
            for (let j=0;j<arr2.length;j++) {
                if(arr1.indexOf(arr2[j]) === -1)
                    arr4.push(arr2[j]);
            }
            newArr = arr3.concat(arr4);
            return newArr;
        }
        //由选项的key得出对应的label
        getCheckLabel (arr:any, value:string) {
            for(let i = 0;i<arr.length;i++){
                if(arr[i].key === value){
                    return arr[i].label
                }
            }
        }
        //搜索金额
        searchPrice () {
            this.filterCondition.billPrice = this.form.billSumPrice
            let currentTag = _.find(this.tags, el => el.variable === 'billPrice')
            if(currentTag) {
                currentTag.name = this.filterType.billPrice
            } else {
                this.getConditionTag(this.filterType.billPrice, 'billPrice')
            }
            this.getData()
        }
        //清空金额
        clearPrice () {
            this.form.billSumPrice = ''
            this.deleteTags('billPrice')
            this.getData()
        }
        changePrice () {
            if(this.form.billSumPrice == ''){
                this.deleteTags('billPrice')
                this.getData()
            }
        }
        //更改日期
        changeDate () {
            if(this.form.deadlineDays){
                this.filterCondition.expireDate = moment(this.form.deadlineDays).format('YYYY-MM-DD')
                let currentTag = _.find(this.tags, el => el.variable === 'expireDate')
                if(currentTag) {
                    currentTag.name = this.filterType.expireDate
                } else {
                    this.getConditionTag(this.filterType.expireDate, 'expireDate')
                }
            }else{
                this.deleteTags('expireDate')
            }
            this.getData()
        }
        //更改承兑机构
        changeCheckbox (item) {
            //如果点击不限，则取消其他选项
            if(item[item.length-1] == ''){
                this.acceptorTypeArr = ['']
                this.deleteTags('acceptorType')
            }else{
                //点击取消了某个选项
                if(item.length < this.oldChecked.length){
                    //删除的承兑类型id
                    let deleteId = this.diff(Array.from(item), Array.from(this.oldChecked))
                    //删除的承兑类型name
                    let deleteStr = this.getCheckLabel(this.acceptOptions,deleteId.join().toString())
                    //删除的标签
                    let deleteTag = _.find(this.tags, el => el.name.indexOf(deleteStr)>-1)
                    if(deleteTag){
                        this.tags.splice(this.tags.indexOf(deleteTag),1)
                    }
                    this.oldChecked = item
                }else{
                    //新增选中了某个选项
                    this.oldChecked = item
                    //选中的类型
                    this.filterCondition.acceptType = this.getCheckLabel(this.acceptOptions,item[item.length-1])
                    this.getConditionTag(this.filterType.acceptType, 'acceptorType')
                }
                //点击其它选项，则取消“不限”的选中状态
                if(item.includes('')){
                    item.splice(item.indexOf(''),1)
                    this.acceptorTypeArr = item
                }

                //取消了全部选项
                if(item.length == 0){
                    this.acceptorTypeArr = ['']
                    this.deleteTags('acceptorType')
                }
            }
            this.form.acceptorType = this.acceptorTypeArr.join(',')
            this.getData()
        }
        //更改背书瑕疵
        changeFlaw () {
            //筛选出当前选中选项的值
            let {label} = _.find(this.flawOptions, (e, i) => {
                return e.key == this.form.billFlaw;
            })
            this.filterCondition.flaw = label
            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags, el => el.variable === 'flaw')
            if(currentTag) {
                currentTag.name = this.filterType.flaw
            } else {
                this.getConditionTag(this.filterType.flaw, 'flaw')
            }
            //点击不限删除对应标签
            if(this.form.billFlaw == ''){
                this.deleteTags('flaw')
            }
            this.getData()
        }
        // 切换承兑机构
        changeAcceptorStr () {
            //筛选出当前选中选项的值
            let {label} = _.find(this.acceptOptions, (e, i) => {
                return e.key == this.form.acceptorType;
            })
            this.filterCondition.acceptorType = label
            //如果已经存在同类型选项的标签
            let currentTag = _.find(this.tags, el => el.variable === 'acceptorType')
            if(currentTag) {
                currentTag.name = this.filterType.acceptorType
            } else {
                this.getConditionTag(this.filterType.acceptorType, 'acceptorType')
            }
            //点击不限删除对应标签
            if(this.form.acceptorType == ''){
                this.deleteTags('acceptorType')
            }
            this.getData()
        }
        //切换报价方式
        changeTradeType () {
            let {label} = this.tradeModeOptions.find((e, i) => {
                return e.key == this.form.LoanAndEntrance;
            })
            this.filterCondition.LoanAndEntrance = label;
            let currentTag = _.find(this.tags, el => el.variable === 'LoanAndEntrance')
            if(currentTag) {
                currentTag.name = this.filterType.LoanAndEntrance
            }else{
                this.getConditionTag(this.filterType.LoanAndEntrance, 'LoanAndEntrance')
            }
            if(this.form.LoanAndEntrance == ''){
                this.deleteTags('LoanAndEntrance')
            }
            this.getData()
        }
        get_row_key (row:object) {
            return row.index
        }
        //切换展示
        toggleRowExpansion (row:object,expanded:boolean) {
            this.expandRowKeys = []
            this.expandRowKeys.push(row.index)
        }
        //获取单条票查查数据详情
        async clickTable (row:any) {
            this.$refs['refTable'].toggleRowExpansion(row)
            let params = {
                billOfferDetailId: row.billOfferDetailId,
                outUsage: row.outUsage
            }
            let res = await this.$http.get('pcc/pc/getPccBillOfferDetailPC',{params})
            if(res.status == 200){
                this.detailData = res.data
            }
        }
        formatterAccept (row) {
            return ellipsis(row.acceptorTypeName,'...',10)
        }
        formatterTime (temp) {
            return moment(temp).format('YYYY-MM-DD')
        }
        //排序
        sortChange (col) {
            if(col.order == 'ascending'){
                this.form.orderBy = '+'+col.prop
            }else if(col.order == 'descending'){
                this.form.orderBy = '-'+col.prop
            }
            this.getData()
        }

        // 清空
        clearMatch () {

        }
        // 筛选
        chooseMatch () {

        }
        mounted () {
            this.form.acceptorType = this.$route.params.accept_type_id;
            // this.acceptorTypeArr.push(this.form.acceptorType)
            // this.acceptorTypeArr = this.acceptorTypeArr.slice(1)
            // this.form.acceptorTypeStr = this.$route.params.accept_type_id;
            // console.log(this.acceptorTypeArr)
            this.form.billSumPrice = this.$route.params.bill_sum_price;
            this.form.deadlineDays = this.$route.params.dead_date;
            this.form.billFlaw = this.$route.params.bill_flaws;
            this.getData();
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        border: 1px solid #ddd;
        margin-top: 20px;
        padding-top: 20px;
    }
    .content{
        .filter_block{
            margin-bottom: 52px;
            .block{
                box-shadow: 2px 2px 10px 2px $__color-line;
                border-radius: 4px;
            }
            .block_left{
                padding: 12px 0;
                width: 73%;
                margin-right: 1%;
                float: left;
                .bill_price{
                    position: relative;
                    .company{
                        position: absolute;
                        right: 5px;
                        top: 0;
                    }
                }
                .condition_tangs{
                    border-top: 1px solid $__color-bg-primary;
                    margin-bottom: 0;
                    .el-tag{
                        margin-right: 10px;
                    }
                    .clear_filter{
                        cursor: pointer;
                    }
                }
            }
            .block_right{
                float: left;
                width: 26%;
                height: 294px;
                padding: 12px 0;
                border-top: 2px solid $__color-primary;
                color: $__color-label;
                .block_title{
                    height: 88px;
                    display: flex;
                    padding: 0 20px;
                    img{
                        height: 100%;
                        width: 88px;
                        flex: 1;
                    }
                    span{
                        padding: 15px 0 15px 15px;
                        font-size: 14px;
                        line-height: 20px;
                    }
                }
                .block_content{
                    padding: 0 40px;
                    .title{
                        font-size: 16px;
                        color: $__color-label;
                        font-weight: 600;
                        line-height: 34px;
                    }
                    .contact{
                        margin-bottom: 15px;
                        .el-input{
                            float: left;
                            width: 200px;
                        }
                        .el-button{
                            float: left;
                            margin-left: 10px;
                        }
                    }
                    .phoneNumber{
                        font-size: 14px;
                        color: $__color-show;
                        line-height: 30px;
                        span{
                            color: $__color-label;
                        }
                    }
                }
            }
        }
        .reserva-dialog{
            .hpx-success{
                font-size: 30px !important;
                margin-bottom: 12px !important;
            }
        }
        .table_title{
            height: 48px;
            border-bottom: 1px solid $__color-primary;
            .title_word{
                display: inline-block;
                height: 18px;
                line-height: 18px;
                margin-top: 11px;
                border-left: 2px solid $__color-primary;
                padding-left: 6px;
                margin-right: 40px;
                color: $__color-label;
                font-size: 18px;
            }
        }
    }
    .el-radio-button__orig-radio:checked .el-radio-button__inner{
        background-color: $__color-primary !important;
    }
    .full-width{
        width: 100% !important;
    }
    .condition_tangs {
        border-top: 1px solid #ddd;
        margin-bottom: 0px;
    }
    .result_title_price {
        .el-input {
            width: 320px;
        }
    }
    .form-title-con1 {
        width: 100% !important;
    }
    .clear_filter_btn {
        text-align: right;
        padding-right: 12px;
        height: 30px;
    }
    .match_template_table {
        .el-form-item {
            margin-bottom: 0;
        }
    }
</style>
<style lang="scss">
    .el-table__expand-icon {
        display: none;
    }
</style>
